<template>
    <g-layout :title="detail">
        <view class="detail_vue">
            <u-swiper
                :list="swiperImgs"
                @click="onViewSwiper"
                height="450"
                mode="node"
                img-mode="scaleToFill"
                indicator-pos="bottomRight" />
            <view class="pd-10" v-if="menuData != undefined && menuData.length != 0">
                <scroll-view scroll-y class="scrollView" @scrolltolower="getList" @scroll="scroll">
                    <view class="menu-main">
                        <view class="menu-item" :id="lazyLoadItemName + index" v-for="(item, index) in menuData" :key="index" @click="onMenu(item)">
                            <view class="item-name">{{item.name}} 家</view>
                            <view class="picture-number" v-if="item.photoList != undefined && item.photoList.length != 0">{{ item.photoList.length }}张</view>
                            <image class="images"  :src="item.src" mode="aspectFill" />
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </g-layout>
</template>

<script>
import QSLazyLoad from '@/js_sdk/QS-lazyLoad/QS-lazyLoad.js';
const lazyLoadItemName = 'lazyLoadItem_';
import base from '@/utils/base';
import indexData from "./index.json"
export default {
    name: "settings",
    extends: base,
    mixins: [QSLazyLoad({ lazyLoadItemName, lazyArrName: 'lazyArr', orderly: 1 })],
    data() {
        return {
            detail:'',
            swiperImgs: [],
            menuData:[],

            detailData:[],

            lazyArr: [
                {show:true,}
            ],
            urls: [],
            list: [],
            lazyLoadItemName,
        }
    },
    onReady() {
        this.urls = getApp().globalData.urls;
        this.getList()
    },
    onLoad() {
        let self = this;
        const eventChannel=this.getOpenerEventChannel();
        eventChannel.on('acceptDataFromOpenerPage',function(data){
            self.detail = data.name
            self.detailData = indexData.detailData
            self.detailData.find(item => {
                if(item.title===self.detail){
                    self.swiperImgs = item.swiperImgs
                    self.menuData = item.menuData
                }
            })
        });
    },
    methods: {
        scroll(e) {
            this.QSLAZYLOAD_setScrollTop(e.detail.scrollTop);
        },
        getList() {
            const l = this.list.length + 10;
            this.list = Array(l).fill('').map(item=>1);
            this.QSLAZYLOAD_update(this.list.length);
        },
        onMenu(item){
            let self = this;
            if(item.photoList.length<=0){
                uni.showToast({
                    title: "照片为空!",
                    icon: "none",
                    position: 'bottom'
                })
                return
            }
            self.openPage({
                url: '/pages_pedigree/detail-list',
                params: item
            });


            // let photoList = self.menuData[indexImg].photoList.map(item => {
            //     return item.url;
            // });
            // if(photoList.length<=0){
            //     uni.showToast({
            //         title: "照片为空!",
            //         icon: "none",
            //         position: 'bottom'
            //     })
            //     return
            // }
            // uni.previewImage({
            //     current: 0,
            //     urls: photoList
            // });
        },
        onViewSwiper(index){
            const self = this;
            uni.previewImage({
                current: index,
                urls: self.swiperImgs
            });
        },
    },
}
</script>

<style scoped lang="scss">
/deep/.images{width: 100%!important;}

.detail_vue {
    height:100%;
    .menu-branch{
        height: calc(100% - 350rpx);
        overflow: auto;
        padding-top: 10px;
    }
}

.menu-main{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap:15px;
    padding: 0 0 30px;
    .menu-item{
        height: 175px;
        position: relative;
        border: 1px solid #c4bfbf;
        border-radius: 10px;
        overflow: hidden;
        display: block;
        object-fit: cover;
        background-clip: padding-box;
        box-sizing: border-box;
        box-shadow: 0px 5px 4px 0 #cdcdcd;
        border-collapse: collapse;
        uni-image{
            height: 145px;
            border-collapse: collapse;
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
        }
        .item-name{
            z-index: 10;
            text-align: center;
            background: white;
            padding: 5px 20px;
            border-radius: 10px;
            opacity: 0.8;
            overflow: hidden;
        }
        .picture-number{
            position: absolute;
            bottom: 5px;
            right: 2px;
            z-index: 10;
            padding: 1px 10px;
            background: white;
            border-radius: 10px;
            font-size: 12px;
            opacity: 0.7;
        }
    }
    :nth-child(4) .item-name{min-width: 190rpx;}

}




.scrollView{
    height: 100%;
    width: 100%;
}
.list-item {
    padding: 30rpx;
    border-radius: 8rpx;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    margin-bottom: 17px;
}

.scroll-item-image {
    background-color: #F8F8F8;
    border-radius: 8px;
    height: 220rpx;
    width: 300rpx;
}

.scroll-item-text-view {
    width: 320rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.scroll-item-text {
    font-size: 16px;
    color: #666;
}
</style>
